<template>
  <div>
    <!-- 单料评吸设置 -->
    <div class="top df jc-sb w100">
      <somkeTop :title="top_title" :list="top_list"></somkeTop>
      <div> <lay-button @click="close" class="layui-btn ">关闭</lay-button></div>
    </div>
    <div class="content">
      <div class="btn">
      </div>
      <div class="table-group">
        <table border="">
          <tr>
            <th rowspan="2">编号</th>
            <th rowspan="2">年份、产地、等级</th>
            <th colspan="3">香气指标</th>
            <th colspan="3">烟气指标</th>
            <th colspan="3">控制指标</th>
            <th rowspan="2">燃烧性</th>
            <th rowspan="2">灰色</th>
            <th rowspan="2">突出特点</th>
            <th rowspan="2">用途</th>
            <th rowspan="2">备注</th>
            <th rowspan="2">操作</th>
          </tr>
          <tr>
            <th>香型</th>
            <th>香气值</th>
            <th>香气量</th>
            <th>浓度</th>
            <th>柔细度</th>
            <th>余味</th>
            <th>杂气</th>
            <th>刺激性</th>
            <th>劲头</th>
          </tr>
          <tr v-for="item in tableData " :key="item.id">
            <td>{{item.number || '-'}}</td>
            <td>{{item.smokeName || '-'}}</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td><el-button link @click="del_y(item)">删除</el-button></td>
          </tr>

          <!-- <tr v-for="(item,index) in y_list_sele" :key="index">
            <td>{{ item.number || item.id }}</td>
            <td>{{ item.smokeModel }}</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td @click="del_y(item)">删除</td>
          </tr> -->
          <tr>
            <td colspan="22">
              <div class="df-c"> <lay-button size="sm" style="padding: 0 100px;" border-style="dashed" @click="add">添加</lay-button></div>
            </td>
          </tr>
        </table>
      </div>
      <!-- <div class="footer-btn">
        <div></div>
        <div>
          <lay-button @click="close" class="layui-btn layui-bg-blue">关闭</lay-button>
        </div>
      </div> -->

    </div>

    <!-- 烟支弹层 -->
    <lay-layer v-model="y_visible" :area="['500px', '400px']" :title="'提示'" :btn="y_visible_opteron">
      <div style="padding: 20px 40px 20px 20px;">
        <lay-form :model="from" ref="layFormRef4" required label-position="top" :labelWidth="'200'">
          <lay-form-item label="编号" prop="number">
            <lay-input v-model="from.number" placeholder="请输入编号"></lay-input>
          </lay-form-item>
          <lay-form-item label="年份、产地、等级" prop="smokeName">
            <lay-input v-model="from.smokeName" placeholder="请输入年份、产地、等级"></lay-input>
          </lay-form-item>
        </lay-form>
      </div>
    </lay-layer>
  </div>
</template> 
  
  <script setup lang="ts">
import somkeTop from "@/components/somkeTop.vue";
import http from "@/http";
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { layer } from "@layui/layui-vue";
const router = useRouter();
const route = useRoute();
const id = route.query.id;
const info = ref([]);

const from = ref({
  number: "",
  smokeName: "",
});

const top_title = ref("单料烟评吸设置");
const top_list = ref([
  {
    name: "单位(部门)",
    content: "许昌卷烟厂",
    id: 1,
  },
  {
    name: "时间",
    content: new Date().toLocaleString(),
    id: 2,
  },
  {
    name: "编号",
    content: "Q/HNZY 101.3 001-15",
    id: 3,
  },
]);

const layFormRef4 = ref();
// 添加
const add = () => {
  y_visible.value = true;
};

// 删除
const del_y = async (item) => {
  console.log(item);

  // /meetingCompetitors/batch
  const res = await http.corsApi(`/meetingUnblended/${item.id}`, "delete", [item.id]);
  console.log(res);

  if (res.data) {
    layer.confirm("删除完成", { icon: 1 });
    await get_detail();
  }
};

// 烟支弹层
const y_visible = ref(false);
// 烟支弹层操作
const y_visible_opteron = ref([
  {
    text: "确认",
    callback: async () => {
      console.log(info.value);
      console.log(from.value);
      layFormRef4.value.validate(async (isValidate, model, errors) => {
        if (isValidate) {
          const res = await http.corsApi("/meetingUnblended", "post", { allId: id, number: from.value.number, smokeName: from.value.smokeName });
          console.log(res);
 
          if (res.data) {
            layer.confirm("设置完成", { icon: 1 });
            resetAddFrom()
            y_visible.value = false;
            await get_detail();
          }
        }
      });
    },
  },
  {
    text: "取消",
    callback: () => {
      resetAddFrom()
      y_visible.value = false;
      //   layer.confirm("取消操作", { shade: false,icon:2 });
    },
  },
]);

// 重置添加表单
function resetAddFrom() {
  from.value = {
    number: "",
    smokeName: ""
  }
}

const enter = async () => {
  console.log(info.value);

  //   let method = "post";
  //   if (info.value && info.value.length > 0) {
  //     method = "put";
  //   }

  //   const res = await http.corsApi("/meetingThreePoint", method, {
  //     allId: id,
  //     allowanceIdList: y_selectedKeys.value,
  //   });
  //   console.log(res);
  //   if (res.data) {
  //     layer.confirm("设置完成", { icon: 1 });
  //     setTimeout(() => {
  //       router.go(-1);
  //     }, 1500);
  //   }
};
// 取消
const close = () => {
  router.go(-1);
};

const tableData = ref([]);
// 获取页面初始信息
const get_detail = async () => {
  const res = await http.corsApi("/meetingUnblended", "get", { allId: id });
  console.log(res);
  if (res.data) {
    info.value = res.data;

    tableData.value = res.data;
  }
};
onMounted(async () => {
  await get_detail();
});
</script> 
  
  <style scoped lang="scss">
.top {
  width: 100%;
  background-color: #fff;
  padding: 30px;
  box-sizing: border-box;
}
.content {
  width: 100%;
  background-color: #f5f5f5;
  padding: 30px 25px;
  box-sizing: border-box;
  .btn {
    margin-bottom: 15px;
  }
  .table-group {
    height: 500px;

    overflow-y: scroll;
    table {
      width: 100%;
      overflow: auto;
      tr {
        th {
          padding: 10px 0;
        }
        td {
          text-align: center;
          padding: 10px 0;
        }
      }
    }
  }
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background-color: #e4e4e4;
    border-radius: 2px;
  }
  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #b4b7c0;
    border-radius: 2px;
  }
}
.footer-btn {
  display: flex;
  justify-content: space-between;
  padding: 15px 40px;
  box-sizing: border-box;
}
</style>